<template>
  <div id="policy-consult-problem">
    <b-layout
      :border="false"
      :duration="300"
      placement="top"
      space="30px"
      v-loading="loading"
      :breadCrumb="true"
    >
      <div slot="last" class="question">
        <div class="content">
          <question-txt :questionDetail="questionDetail" :lawValue="lawValue"></question-txt>
        </div>
        <div class="menu">
          <question-menu :questionMenu="questionMenu" @getQuestionDetail="getQuestionDetail"></question-menu>
        </div>
      </div>
    </b-layout>
  </div>
</template>

<script>
import BLayout from '@/layouts/BinaryLayout'
import QuestionMenu from '../components/question-menu'
import QuestionTxt from '../components/question-txt'
export default {
  components: {
    BLayout,
    QuestionMenu,
    QuestionTxt
  },
  data () {
    return {
      questionMenu: null,
      questionDetail: null,
      loading: false,
      lawValue: null
    }
  },
  watch: {
  },
  computed: {
  },
  mounted () {
    this.getQuestionList()
  },
  methods: {
    getQuestionList () {
      this.loading = true
      this.$api.getQuestionList().then(res => {
        this.questionMenu = res.data
        this.getQuestionDetail(res.data[0].id)
      }).catch(err => {
        this.loading = false
        this.$msgMnger.httpError(err)
      })
    },
    getQuestionDetail (index) {
      this.loading = true
      this.lawValue = index
      this.$api.getQuestionDetail(index).then(res => {
        this.questionDetail = res.data
        this.loading = false
      }).catch(err => {
        this.loading = false
        this.$msgMnger.httpError(err)
      })
    }
  }
}
</script>

<style lang="scss" scoped>

#policy-consult-problem{
  height: 100%;
  box-sizing: border-box;
  .question{
    height: calc(100% - 50px);
    align-items: center;
    justify-content: space-between;
    padding:32px;
    box-sizing: border-box;
    background: $box-bg-color;
    .menu{
      width:380px;
      height:100%;
      border-radius:0 4px 4px 0;
      border:1px solid $box-border-color;
      float: left;
    }
    .content{
      width: calc(100% - 408px);
      height:100%;
      border-radius:4px;
      margin-right: 24px;
      border:1px solid $box-border-color;
      float: left;
    }
  }
}
</style>
<style lang="scss">
#policy-consult-problem {
  .el-scrollbar {
    height: 100%;
  }
}
</style>
